<script setup lang="ts">
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

// const size = ref<'default' | 'large' | 'small'>('default')

// const value1 = ref('')
// const value2 = ref('')

// const shortcuts = [
//   {
//     text: 'Today',
//     value: new Date(),
//   },
//   {
//     text: 'Yesterday',
//     value: () => {
//       const date = new Date()
//       date.setTime(date.getTime() - 3600 * 1000 * 24)
//       return date
//     },
//   },
//   {
//     text: 'A week ago',
//     value: () => {
//       const date = new Date()
//       date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
//       return date
//     },
//   },
// ]

// const disabledDate = (time: Date) => {
//   return time.getTime() > Date.now()
// }

// // vxe-table
// interface RowVO {
//   id: number
//   name: string
//   role: string
//   sex: string
//   age: number
//   address: string
// }

// const tableData = ref<RowVO[]>([
//   {
//     id: 10001,
//     name: 'Test1',
//     role: 'Develop',
//     sex: 'Man',
//     age: 28,
//     address: 'test abc',
//   },
//   {
//     id: 10002,
//     name: 'Test2',
//     role: 'Test',
//     sex: 'Women',
//     age: 22,
//     address: 'Guangzhou',
//   },
//   {
//     id: 10003,
//     name: 'Test3',
//     role: 'PM',
//     sex: 'Man',
//     age: 32,
//     address: 'Shanghai',
//   },
//   {
//     id: 10004,
//     name: 'Test4',
//     role: 'Designer',
//     sex: 'Women',
//     age: 24,
//     address: 'Shanghai',
//   },
// ])

// dialog
// const dialogVisible = ref(false)

// const handleClose = (done: () => void) => {
//   ElMessageBox.confirm('Are you sure to close this dialog?')
//     .then(() => {
//       done()
//     })
//     .catch(() => {
//       // catch error
//     })
// }
</script>

<template>
  <!-- <el-config-provider :locale="zhCn">
    <div class="flex m-3">
      vue3 starter
      <div>hello</div>
      <el-button type="primary">el-button</el-button>
    </div>
    <span flex="~" class="items-center" text="8">
      <i i-custom-bianji bg="red-500" cursor="pointer" />
      edit
    </span>
    <div>
      <i-ep-add-location />
      <i-ep-aim />
    </div>
    <el-radio-group v-model="size" label="size control" size="small">
      <el-radio-button label="large">large</el-radio-button>
      <el-radio-button label="default">default</el-radio-button>
      <el-radio-button label="small">small</el-radio-button>
    </el-radio-group>
    <div class="demo-date-picker">
      <div class="block">
        <span class="demonstration">Default</span>
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="Pick a day"
          :size="size"
        />
      </div>
      <div class="block">
        <span class="demonstration">Picker with quick options</span>
        <el-date-picker
          v-model="value2"
          type="date"
          placeholder="Pick a day"
          :disabled-date="disabledDate"
          :shortcuts="shortcuts"
          :size="size"
        />
      </div>
    </div>
    <div>
      <vxe-table :data="tableData">
        <vxe-column type="seq" width="60" />
        <vxe-column field="name" title="Name" />
        <vxe-column field="sex" title="Sex" />
        <vxe-column field="age" title="Age" />
      </vxe-table>
    </div> -->
  <!-- <el-button plain @click="dialogVisible = true">
      Click to open the Dialog
    </el-button>

    <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="500"
      :before-close="handleClose"
    >
      <span>This is a message</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-config-provider> -->
  <router-link to="/">Go to Home</router-link>
  <router-link to="/login">Go to Login</router-link>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <el-config-provider :locale="zhCn">
        <component :is="Component" />
      </el-config-provider>
    </keep-alive>
  </router-view>
</template>
